import { StyleSheet, Text, View, ScrollView, Image, Pressable } from 'react-native';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { NavBarHeader } from '~/components';
import { observer, deviceStore } from '~/store';
import { getBleColock, setBleColock } from '~/utils/ble/application';
import { px2dp, scale } from '~/utils/px2dp';
import { delay } from '~/utils/utils';

export default observer(() => {
    const { t } = useTranslation();
    const router: any = useRoute();
    const navigation: any = useNavigation();
    const { colockData } = deviceStore;
    const padZero = (num) => (num < 10 ? `0${num}` : num);
    const [isEdit, setIsEdit] = useState(false);
    const editColock = () => {
        setIsEdit(!isEdit);
    };
    const onPress = (index) => {
        navigation.navigate('ColockDetailes', { selectIndex: index, ...router.params });
    };
    const openColock = async (index) => {
        colockData[index] = colockData[index] === 1 ? 0 : 1;
        setBleColock(router.params, colockData);
        await delay(300);
        getBleColock(router.params);
    };
    useFocusEffect(
        useCallback(() => {
            getBleColock(router.params);
        }, []),
    );
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('SetBleColock.title')} />
            <ScrollView contentContainerStyle={styles.contentStyle}>
                <Pressable style={[styles.listItem, styles.row]} onPress={() => onPress(0)}>
                    <Text style={styles.clockText}>
                        {padZero(colockData[2])}:{padZero(colockData[3])}
                    </Text>
                    <View>
                        {isEdit ? (
                            <Icon name={'chevron-forward-outline'} size={px2dp(40)} color={'#a4a4a4'}></Icon>
                        ) : (
                            <Pressable onPress={() => openColock(0)}>
                                <Image
                                    style={styles.icons}
                                    resizeMode="contain"
                                    source={{
                                        uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                                            colockData[0] === 1 ? 'open.png' : 'shut.png'
                                        }`,
                                    }}
                                />
                            </Pressable>
                        )}
                    </View>
                </Pressable>
                <Pressable style={[styles.listItem, styles.row]} onPress={() => onPress(1)}>
                    <Text style={styles.clockText}>
                        {padZero(colockData[6])}:{padZero(colockData[7])}
                    </Text>
                    <View>
                        {isEdit ? (
                            <Icon name={'chevron-forward-outline'} size={px2dp(40)} color={'#a4a4a4'}></Icon>
                        ) : (
                            <Pressable onPress={() => openColock(4)}>
                                <Image
                                    style={styles.icons}
                                    resizeMode="contain"
                                    source={{
                                        uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                                            colockData[4] === 1 ? 'open.png' : 'shut.png'
                                        }`,
                                    }}
                                />
                            </Pressable>
                        )}
                    </View>
                </Pressable>
                <Pressable style={[styles.listItem, styles.row]} onPress={() => onPress(2)}>
                    <Text style={styles.clockText}>
                        {padZero(colockData[10])}:{padZero(colockData[11])}
                    </Text>
                    <View>
                        {isEdit ? (
                            <Icon name={'chevron-forward-outline'} size={px2dp(40)} color={'#a4a4a4'}></Icon>
                        ) : (
                            <Pressable onPress={() => openColock(8)}>
                                <Image
                                    style={styles.icons}
                                    resizeMode="contain"
                                    source={{
                                        uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                                            colockData[8] === 1 ? 'open.png' : 'shut.png'
                                        }`,
                                    }}
                                />
                            </Pressable>
                        )}
                    </View>
                </Pressable>
                <Pressable style={styles.bt} onPress={editColock}>
                    <Text style={styles.bt_text}>{isEdit ? t('SetBleColock.t1') : t('SetBleColock.t2')}</Text>
                </Pressable>
            </ScrollView>
        </View>
    );
});

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
    },
    contentStyle: {
        flexGrow: 1,
        padding: px2dp(24),
        paddingBottom: '20%',
    },
    listItem: {
        backgroundColor: '#fff',
        fontSize: scale(26),
        borderRadius: px2dp(24),
        paddingHorizontal: px2dp(24),
        paddingVertical: px2dp(48),
        marginTop: px2dp(32),
        justifyContent: 'space-between',
    },
    clockText: {
        fontSize: scale(44),
        color: '#000',
        fontWeight: 'bold',
    },
    icons: {
        width: px2dp(120),
        height: px2dp(60),
    },
    bt: {
        height: px2dp(88),
        borderRadius: px2dp(44),
        justifyContent: 'center',
        alignItems: 'center',
        marginHorizontal: px2dp(32),
        backgroundColor: '#25C8C8',
        marginTop: px2dp(64),
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: '500',
    },
});
